<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div>
            <div>
                <span>账号：</span>
                <input id="user" type="text" />
            </div>
            <div>
                <span>密码：</span>
                <input id="password" type="password" />
            </div>
            <div>
                <input id="rememberBtn" checked type="checkbox" />
                <span>记住我？</span>
            </div>
            <button id="loginBtn">登录</button>
        </div>
        <script>
            //获取页面对应的元素
            let user = document.querySelector("#user");
            let password = document.querySelector("#password");
            let rememberBtn = document.querySelector("#rememberBtn");
            let loginBtn = document.querySelector("#loginBtn");
            let infoStr = localStorage.getItem("account");
            let info = JSON.parse(infoStr);
            console.log(info);
            //判断这个缓存是否存在
            if (infoStr !== null) {
                console.log(info);
                user.value = info.phone;
                password.value = info.password;
            }
            //创造点击事件
            loginBtn.addEventListener("click", function (event) {
                //获取元素内部的内容
                let userValue = user.value;
                let passwordValue = password.value;
                //判断是否填入东西
                if (userValue === "" || userValue !== info.phone) {
                    alert("用户名错误或为空");
                    return; //必须添加返回，否则会继续执行下面的代码
                }
                if (passwordValue === "" || passwordValue !== info.password) {
                    alert("密码错误或为空");
                    return;
                }
                //获取一个选择框是否点击
                let checked = rememberBtn.checked;
                //判断选择框有没选择，有选择则运行，否则运行else
                if (checked) {
                    localStorage.setItem("info", JSON.stringify(info));
                } else {
                    localStorage.removeItem("info");
                }
                //执行完后提示登入成功
                alert("登录成功");
            });
        </script>
    </body>
</html>
